<template>
  <div class="container">
    <!-- 角色管理 -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="角色管理" name="first">
        <el-row class="add-btn">
          <el-button type="primary" @click="onAddRole">新增角色</el-button>
        </el-row>

        <!-- 新增角色弹窗 -->
        <el-dialog
          title="新增角色"
          :visible.sync="roleDetailVisble"
          @close="onRoleDetailClose"
        >
          <el-form :model="addRole">
            <el-form-item label="角色名称" :label-width="formLabelWidth" required>
              <el-input v-model="addRole.name" />
            </el-form-item>
            <el-form-item label="角色描述" :label-width="formLabelWidth">
              <el-input v-model="addRole.description" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="onRoleDetailClose">取消</el-button>
            <el-button type="primary" @click="onRoleDetailOk">确定</el-button>
          </span>
        </el-dialog>

        <!-- 分配权限 -->
        <el-dialog
          title="分配权限"
          :visible.sync="permissionVisble"
          @close="onRolePermissionClose"
        >
          <el-tree
            :data="permissionsTreeData"
            show-checkbox
            node-key="id"
            :default-expanded-keys="rolePermissions"
            :default-checked-keys="rolePermissions"
            :props="{
              children: 'children',
              label: 'name'
            }"
          />
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onRolePermissionOk">确定</el-button>
            <el-button @click="onRolePermissionClose">取消</el-button>
          </span>
        </el-dialog>

        <!-- 编辑角色 -->
        <el-dialog
          title="编辑角色"
          :visible.sync="editorVisble"
          @close="onEditoRoleClose"
        >
          <el-form v-loading="loading" :model="editorRole">
            <el-form-item label="角色名称" :label-width="formLabelWidth" required>
              <el-input v-model="editorRole.name" :placeholder="editorRole.name" />
            </el-form-item>
            <el-form-item label="角色描述" :label-width="formLabelWidth">
              <el-input v-model="editorRole.description" :placeholder="editorRole.description" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="onEditoRoleClose">取消</el-button>
            <el-button type="primary" @click="onEditoRoleOk">确定</el-button>
          </span>
        </el-dialog>

        <!-- 表单组件 -->
        <my-table
          :table-props="{
            data: roleList.rows,
            border: true
          }"
          :columns="[
            { label: '序号', prop: 'index', width: 80, align: 'center' },
            { label: '角色', prop: 'name', width: 180, align: 'center' },
            { label: '描述', prop: 'description', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
          :pagination-props="{
            layout: 'total, ->, prev, pager, next',
            total: roleList.total
          }"
          :pagination-events="events"
        >
          <template v-slot:operators="scope">
            <el-button type="success" size="small" @click="onpermissionClick(scope.row)">分配权限</el-button>
            <el-button type="primary" size="small" @click="onEditorClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="onDelClick(scope.row)">删除</el-button>
          </template>
        </my-table>
      </el-tab-pane>
      <!-- 配置管理 -->
      <el-tab-pane label="公司信息" name="third">
        <div class="warn">
          <i class="el-icon-info" />
          <span>对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改</span>
        </div>
        <el-form ref="form" label-width="120px" disabled>
          <el-form-item label="公司名称">
            <el-input :placeholder="companyDetails.name" style="width:400px" />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input :placeholder="companyDetails.companyAddress" style="width:400px" />
          </el-form-item>
          <el-form-item label="公司邮箱">
            <el-input :placeholder="companyDetails.mailbox" style="width:400px" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :placeholder="companyDetails.remarks" style="width:400px; height: 75px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import { tableDel } from '@/store/utils/tableDel'
import { tableAdd } from '@/store/utils/tableAdd'
import * as companyApi from '@/api/company'

let currentId = null

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      events: {
        'current-change': this.onCurrentPageChange
      },
      roleDetailVisble: false,
      formLabelWidth: '120px',
      addRole: {},
      activeName: 'first',
      roleDetailCheckList: [],
      permissionVisble: false,
      rolePermissions: [],
      editorVisble: false,
      editorRole: {},
      loading: false,
      permissionsTreeData: []
    }
  },
  computed: {
    ...mapState('role', ['roleList']),
    ...mapState('company', [
      'companyDetails',
      'permissions',
      'rolePeimissionsList'
    ]),
    ...mapGetters('company', ['permissionsTree'])
  },
  methods: {
    ...mapActions('role', ['updateRoleList']),
    ...mapActions('company', [
      'updatecompanyDetailList',
      'updatePermissionList',
      'updateRolePermissionList'
    ]),
    onCurrentPageChange(currentPage) {
      this.currentPage = currentPage
      this.updateRoleList({
        page: this.currentPage,
        size: this.pageSize
      })
    },
    // 新增角色
    onAddRole() {
      this.roleDetailVisble = true
    },
    // 取消按钮
    onRoleDetailClose() {
      this.roleDetailVisble = false
    },
    // 确认新增按钮 发请求
    async onRoleDetailOk() {
      await tableAdd('/sys/role', this.addRole)
      this.roleDetailVisble = false
      this.addRole = {}
      this.updateRoleList({
        page: this.currentPage,
        size: this.pageSize
      })
    },

    // 分权权限
    async onpermissionClick(row) {
      this.permissionVisble = true
      // 角色权限列表赋值到新变量，解决默认选中不刷新问题，原因是默认选中项不为双向绑定（v-model）, 第二次的选中项默认为添加而不是更新
      this.permissionsTreeData = this.permissionsTree
      await this.updateRolePermissionList(row.id)
      this.rolePermissions = this.rolePeimissionsList.permIds
      currentId = row.id
    },
    // 点击取消
    onRolePermissionClose() {
      this.permissionVisble = false
      this.rolePermissions = []
      this.permissionsTreeData = []
    },
    // 点击确认按钮
    onRolePermissionOk() {
      companyApi.updateRolePermissions(currentId, this.rolePermissions)
      this.onRolePermissionClose()
    },
    // 点击编辑按钮
    async onEditorClick(row) {
      this.loading = true
      this.editorVisble = true
      await this.updateRolePermissionList(row.id)
      this.loading = false
      this.editorRole = this.rolePeimissionsList
    },
    // 点击取消
    onEditoRoleClose() {
      this.editorVisble = false
    },
    // 点击确认
    onEditoRoleOk() {
      companyApi.editorRole({
        id: this.editorRole.id,
        description: this.editorRole.description,
        name: this.editorRole.name
      })
      this.updateRoleList({
        page: this.currentPage,
        size: this.pageSize
      })
      this.onEditoRoleClose()
    },
    // 删除角色
    async onDelClick(item) {
      await tableDel(item.id, '/sys/role/', `角色 "${item.name}" `)
      this.updateRoleList({
        page: this.currentPage,
        size: this.pageSize
      })
    }

  },
  created() {
    this.updateRoleList({
      page: this.currentPage,
      size: this.pageSize
    })
    this.updatecompanyDetailList(1)
    this.updatePermissionList()
    console.log(this.rolePeimissionsList)
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 16px;
  .add-btn {
    margin-bottom: 36px;
  }
}
::v-deep .el-dialog__header{
  background: #66b1ff;
  span,
  i {
    color: #fff;
  }
}
.warn {
  padding: 16px;
  font-size: 12px;
  color: #9093a5;
  background-color: #f4f4f5;
  margin-bottom: 50px;
  span {
    margin-left: 6px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
